<template>
  <div>
    <!-- 测试消息提示组件 -->
    <!-- <XtxMessage type="warn" text="警告" /> -->
    <!-- <XtxMessage type="error" text="错误" /> -->
    <!-- <XtxMessage type="success" text="成功" /> -->
    <!-- <button class="btn" @click="open">调用消息提示的方法</button> -->
      <!-- 测试轮询 -->
    <div>
      <h1>{{ count }}</h1>
      <button @click="start">start</button>
      <button @click="pause">stop</button>
    </div>
  </div>
</template>

<script>
// import { render, onMounted, createVNode } from 'vue'
// import { ref } from 'vue'
// import { useIntervalFn } from '@vueuse/core'
import { useCountDown } from '@/hooks'
export default {
  setup () {
    // onMounted(() => {
    //   const h1 = createVNode('h1', { class: 'pink' }, ['我是子元素'])
    //   console.log('虚拟DOM', h1)
    //   render('h1', document.querySelector('.btn'))
    // })
    // 了解useIntervalFn用法
    /**
     * pause 停止
     * resume 开始
     */
    // const count = ref(60)
    // const { pause, resume } = useIntervalFn(() => {
    //   /* your function */
    //   // console.log(count.value)
    //   count.value--
    //   if (count.value <= 0) {
    //     pause()
    //   }
    // }, 1000)
    // return { open, count, pause, resume }
    const { count, pause, start } = useCountDown(5)
    return { count, pause, start }
  }
}
</script>

<style lang="scss" scoped>
</style>
